import React from 'react';
import classes from "./Meal.module.css"

import Counter from "../../UI/Counter/Counter"
const Meal = (props) => {
    return (
        <div className={classes.Meal}>
            <div className={classes.ImgBox}>
                <img src={props.data.img} />
            </div>
            <div className={classes.flexBox}>
                <h2 className={classes.Title}>{props.data.title}</h2>
                {props.isShow ? null : <p className={classes.Description}>{props.data.desc}</p>}
                <div className={classes.PriceWrap}>
                    <span className={classes.Price}>{props.data.price}</span>
                    <Counter amount={props.data.amount}  data = {props.data}></Counter>
                </div>
            </div>
        </div>
    );
};

export default Meal;